<html>
  <head>
  <title>CQED - Canvas Quest Editor v 0.02 02/13/2006</title>
  <script>
    function edObj(){
      //stub for editor Object
    }
  edObj.prototype = {
    init: function (){ 
      //alert(this.tiles.a)
      this.showMap()
    },
    showMap: function () {
      var theMap = document.getElementById('map');
      var ctx = theMap.getContext('2d');
      for(i = 0; i < 10; i++){
        for(j = 0; j < 10; j++){
          ctx.drawImage(document.getElementById(this.tileMap[i][j].id),this.tileMap[i][j].x, this.tileMap[i][j].y,32,32,j*32,i*32,32,32)
        }
      }
    },
    showTiles: function(){
      var theTiles = document.getElementById('tiles');
      var ctx = theTiles.getContext('2d');
      
    },
    tiles : {a: {id: 'features', x: 0, y: 0, collision: false }},
    tileMap : [[]],
    numRes: 0
    
  
  }
function tileObj(id,x,y,col) {
	this.id = id;
	this.x = x;
	this.y = y;
	this.collision = col;
	return this;
}
function eventObj(id,x,y,evtStr){
  this.id = id;
  this.x = x;
  this.y = y;
  this.eventStr = evtStr;
  this.toMap = ''
}


  var CQEditor = new edObj;
  CQEditor.tileMap[0][0] = CQEditor.tiles.a  
  function resCount(){
	 CQEditor.numRes +=1;
	 if(CQEditor.numRes == 10){
		  CQEditor.init();
	 }
}
  
  
  </script>
  <style>
    #edwin .mapview {float: left; border: 5px inset grey;}
    #edwin .pallette {width: 320px; margin-left: 330px;}
    #edwin .pallette canvas, #properties { border: 5px inset grey;}
    #properties {width: 650px;}
    #edtxt {width: 650px; text-align: center;}
    #edtxt h4 {margin: 0px; padding: 0px;}
    #currimg {float:right; border: 1px solid black; width:32px; height: 32px;}
    #gen {float: right; padding: 5px 5px 0px 5px;}
  </style>
  </head>
  <body>
<div id='edtxt'>
<h4>CQED - Canvas Quest Editor</h4>
</div>
<div id='edwin'>
  <div class='mapview'>
    <canvas id='map' height="320" width="320"></canvas>
  </div>
  <div class="pallette">
    <canvas id='tiles' height="320" width="320"></canvas>
  </div>


</div>
<div id='properties'>
  <div id='currimg'></div>
  <div id='gen'><button value='foo'>Gen</button></div>
  <div>Image:</div>
  <div>Position:</div>
  <div>Event:</div> 
  <div>Collision:</div>
  
</div>
<div id='output'>
  <textarea rows='3' cols='55' >
  
  </textarea>
</div>
<div id="imgstore">
      <img id="logo" src="logo2.png" onload="resCount()"/>
      <img id="uniques" src="dg_uniques32.png" onload="resCount()"/>
      <img id="dungeon" src="dg_dungeon32.png" onload="resCount()"/>
      <img id="features" src="dg_features.png" onload="resCount()"/>
      <img id="misc" src="dg_misc.png" onload="resCount()"/>
      <img id="food" src="dg_food32.png" onload="resCount()"/>
      <img id="fonts" src="fonts.png" onload="resCount()"/>
      <img id="ui" src="ui.png" onload="resCount()"/>
      <img id="gamefont" src="gamefonts.png" onload="resCount()"/>
      <img id="ouch" src="ouch.png" onload="resCount()"/>
</div>
  </body>
</html>
